<template>
    <div class="platformContainer">
        <el-card shadow="always" class="header_card">
            <el-form :inline="true" :model="formInline" label-width="1.25rem">
                <el-form-item label="账号">
                    <el-input v-model="formInline.user" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="公司名">
                    <el-select v-model="formInline.region" placeholder="请输入公司">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-select v-model="formInline.region" placeholder="请输入用户">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="手机号码" v-if="changed">
                    <el-select v-model="formInline.region" placeholder="请输入手机">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-row :gutter="10">
                        <el-col :span="8"><el-button type="primary" @click="onSubmit">搜索</el-button></el-col>
                        <el-col :span="8"><el-button @click="onSubmit">重置</el-button></el-col>
                        <el-col :span="8"><el-button @click="change">更多<i
                                    :class="[changed ? 'el-icon-arrow-up' : 'el-icon-arrow-down']"></i></el-button></el-col>
                    </el-row>
                </el-form-item>
            </el-form>
        </el-card>
        <div class="content">
            <el-descriptions title="商家信息" :colon="false">
                <template slot="extra">
                    <el-button type="primary" @click="openDialog1"><i class="el-icon-plus"></i>新增商家</el-button>
                    <el-button type="primary" @click="openDialog2"><i class="el-icon-search"></i>查询归属地</el-button>
                </template>
            </el-descriptions>
            <div class="table" style="width: 99%;">
                <el-table :data="tableData" :header-cell-style="headerRowStyle2" class="tag6_table" height="7rem">
                    <el-table-column prop="date" label="平台用户名">
                    </el-table-column>
                    <el-table-column prop="name" label="公司名">
                    </el-table-column>
                    <el-table-column prop="state" label="已分配数量">
                    </el-table-column>
                    <el-table-column prop="state" label="已使用数量">
                    </el-table-column>
                    <el-table-column prop="operate" label="剩余数量">
                    </el-table-column>
                    <el-table-column prop="operate" label="单价(元)">
                    </el-table-column>
                    <el-table-column prop="operate" label="账号名">
                    </el-table-column>
                    <el-table-column prop="operate" label="角色">
                    </el-table-column>
                    <el-table-column prop="operate" label="电话">
                    </el-table-column>
                    <el-table-column prop="operate" label="创建时间">
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" width="300px" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small">修改</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button type="text" size="small">报表</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button type="text" size="small">设备列表</el-button>
                            <el-divider direction="vertical"></el-divider>
                            <el-button type="text" size="small">重置密码</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>


        <el-dialog title="新增用户" :visible="dialog1" width='40%' :before-close="handleClose1">
            <el-form :model="form" label-width="1.5rem" class="dialog1_form">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="平台用户名">
                            <el-input v-model="formInline.user" placeholder="请输入平台用户名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="公司名">
                            <el-input v-model="formInline.user" placeholder="请输入公司名"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="账号">
                            <el-input v-model="formInline.user" placeholder="请输入字母或数字"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="手机号">
                            <el-input v-model="formInline.user" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="密码">
                            <el-input v-model="formInline.user" placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="角色">
                            <el-select v-model="formInline.region" placeholder="请选择角色">
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog1 = false">取 消</el-button>
                <el-button type="primary" @click="dialog1 = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="查询归属地" :visible="dialog2" width='40%' :before-close="handleClose2">
            <el-form :model="form" label-width="1.5rem" class="dialog1_form">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="序列号">
                            <el-input v-model="formInline.user" placeholder="请输入序列号"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog1 = false">取 消</el-button>
                <el-button type="primary" @click="dialog1 = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

export default {
    data() {
        return {
            changed: false,
            formInline: {},
            headerRowStyle2: {
                'backgroundColor': '#f8f8f9',
                'color': 'black'
            },
            dialog1: false,
            dialog2: false,
            tableData: [
                {
                    date: 1,
                    state: '0',
                    role: '0'
                },
                {
                    date: 2,
                    state: '1',
                    role: '1'
                }
            ]
        }
    },
    methods: {
        openDialog1() {
            this.dialog1 = true
        },
        openDialog2() {
            this.dialog2 = true
        },
        handleClose1() {
            this.dialog1 = false
        },
        handleClose2() {
            this.dialog2 = false
        },
        change() {
            this.changed = !this.changed
        }
    },
    // 使用
    mounted() {
        this.$nextTick(() => {
        });
    },
}
</script>
<style scoped>
.platformContainer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.header_card {
    margin-bottom: 20px;
}

::v-deep .el-form-item {
    margin-bottom: .125rem !important;
}

.content {
    padding: .25rem;
}

::v-deep .el-descriptions__header {
    justify-content: flex-start;
}

::v-deep .el-descriptions__title {
    margin-right: .25rem;
}

::v-deep .dialog1_form .el-row {
    padding: .0625rem 0;
}
</style>